<template>
    <div class="login">
        <el-form style="width:300px;z-index:3" ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="width:200px" type="success" @click="login">Login</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误

    export default {
        components: {

        },
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            };
        },
        methods: {
            login() {
                // 检查
                this.$notify({
                    title: '成功',
                    message: '登录成功',
                    type: 'success',
                    duration:1500,
                    onClose:()=>{
                        this.$router.push('/')
                    }
                });
            }
        },
        created() {
            this.$get('http://localhost:9999/show.json').then(r => {
                let arr = r.filter((arr, i) => {
                    return i < 3
                })
                console.log(arr);
            })
        },
    };

</script>

<style scoped>
    .login {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: skyblue;
    }

    .login:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: inherit;
        filter: blur(2px);
        z-index: 2;
    }

</style>
